<%@ include file="/WEB-INF/jsp/includes.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
  

    <style type="text/css">
        #loading{
        position:absolute;
        left:45%;
        top:40%;
        padding:2px;
        z-index:20001;
        height:auto;
        border:1px solid #ccc;
    }
    #loading a {
        color:#225588;
    }
    #loading .loading-indicator{
        background:white;
        color:#444;
        font:bold 13px tahoma,arial,helvetica;
        padding:10px;
        margin:0;
        height:auto;
    }
    #loading-msg {
        font: normal 10px arial,tahoma,sans-serif;
    }
    
    </style>
    <link rel="stylesheet" type="text/css" href="<c:url value="/styles/ext-all.css"/>" />
    <title>Petclinic starting page</title>
    
	<meta http-equiv="pragma" content="no-cache"/>
	<meta http-equiv="cache-control" content="no-cache"/>
  </head>
  <body   style="overflow: hidden">
  <div id="loading-mask" style=""></div>
  <div id="loading">
    <div class="loading-indicator"><img src="<c:url value="/images/default/shared/large-loading.gif"/>" width="32" height="32" style="margin-right:8px;float:left;vertical-align:top;"/>JPetstore Pimped - 1.0 <br /><span id="loading-msg">Loading styles and images...</span></div>
</div>
  

	<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading Core API...';</script>
  	<script type="text/javascript" src="<c:url value="/script/ext/ext-base.js"/>" ></script>
	<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading UI Components...';</script>
  	<script type="text/javascript" src="<c:url value="/script/ext/ext-all-debug.js"/>" ></script>
	<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading DWR Components...';</script>
    <script type="text/javascript" src="<c:url value="/dwr/interface/DwrClinic.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/dwr/interface/DwrExtStateManager.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/dwr/engine.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/dwr/util.js"/>"></script>
    <script type="text/javascript" src="<c:url value="/script/ext/DwrProxy.js"/>" ></script>
    <script type="text/javascript" src="<c:url value="/script/ext/DwrDataReader.js"/>" ></script>
    <script type="text/javascript" src="<c:url value="/script/ext/DwrStateProvider.js"/>" ></script>
    <script type="text/javascript" src="<c:url value="/script/ext/DwrTreeLoader.js"/>" ></script>
    <script type="text/javascript">
			Ext.BLANK_IMAGE_URL = '<c:out value="${pageContext.request.contextPath}"/>/images/default/s.gif';
	</script>
  
	<script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Initializing...';</script>
	<script type="text/javascript">
	

Ext.onReady(function() {



var viewport=	new Ext.Viewport({
	    layout: 'border',
	    defaults: {
	        activeItem: 0
	    },
	    items: [  {
	        region: 'center',
	        collapsible: false,
	        title: 'Owner Tree',
	        id:'ownerTree',
	        xtype: 'treepanel',
	        autoScroll: true,
	        split: true,
	        loader: new Ext.tree.DwrTreeLoader({
		        loadFunction: DwrClinic.findOwners,
		        nameField:'displayableName',
		        childProperty:'pets'
	        }),
	        root: new Ext.tree.AsyncTreeNode({
	        	id:'root',
	        	text:'Root',
	        	expanded:false
	        }),
	        rootVisible: true,
	        listeners: {
	            click: function(n) {
	                //Ext.Msg.alert('Navigation Tree Click', 'You clicked: "' + n.attributes.text + '"');
	            },
	            beforerender:function(tree) {
					 tree.getRootNode().expand();
	            }
	        }
	    }]
	});

	Ext.get('loading').hide(true);

});	

	</script>
    
  </body>
  </html>
  